
<template>
    <div class="homes">
        <el-container>
        <el-header style="height: 100%;">
          <el-row>
            <el-col :span="5">
                <!-- logo -->
                <div class="logobox">
                  <div class="logoico">
                    
                    <!-- <image :src="imga" width="50" height="50"/> -->
                  </div>
                  <div class="logotext">
                    <span>&nbsp;&nbsp;&nbsp;餐&nbsp;厅&nbsp;后&nbsp;台&nbsp;管&nbsp;理&nbsp;系&nbsp;统</span>
                  
                  </div>
                </div>
                  
                 
              
            </el-col>
            <el-col :span="17">&nbsp;</el-col>
            <el-col :span="2">
              
                <!-- 菜单 -->
                <user-info></user-info>
              
            </el-col>
          </el-row>
         
          
        </el-header>
        <el-container>
          <!--侧边栏-->
          <el-aside width="200px">
            <!-- 侧边栏 -->
            <div class="sider_menu">
              <el-menu
                :router="true"
                
                :default-active="$route.path"
                class="el-menu-vertical-demo"
                @open="handleOpen"
                @close="handleClose"
                background-color="#66a9c9"
                text-color="#fff"
                active-text-color="#c4d7d6"
                @select="handleSelect"
                :default-openeds="openeds"
                :unique-opened="true"
                >

                    <el-submenu index="1" v-if="role == 2">
                        <template slot="title">
                            <i class="el-icon-s-operation"></i>
                            <span>基础管理</span>
                        </template>
                        <!-- <el-menu-item-group> -->
                            <el-menu-item index="/goods/class" style="padding-left: 80px;"><i class="el-icon-truck"></i>类型管理</el-menu-item>

                            <el-menu-item index="/" style="padding-left: 80px;"><i class="el-icon-goods"></i>商品管理</el-menu-item>
                            <!-- <el-menu-item index="/basics/logistics" style="padding-left: 80px;"><i class="el-icon-truck"></i>物流管理</el-menu-item> -->
                        <!-- </el-menu-item-group> -->
                    </el-submenu>

                    <el-submenu index="2" v-if="role == 2">
                        <template slot="title">
                            <i class="el-icon-edit-outline"></i>
                            <span>订单管理</span>
                        </template>
                        <!-- <el-menu-item-group> -->
                            <el-menu-item index="/order/transaction" style="padding-left: 80px;"><i class="el-icon-shopping-cart-2"></i>交易订单</el-menu-item>
                            <el-menu-item index="/order/status" style="padding-left: 80px;"><i class="el-icon-set-up"></i>订单状态</el-menu-item>
                          
                            <!-- <el-menu-item index="/order/warehouse" style="padding-left: 80px;"><i class="el-icon-office-building"></i>仓库管理</el-menu-item> -->
                            <el-menu-item index="/order/statistics" style="padding-left: 80px;"><i class="el-icon-pie-chart"></i>数据统计</el-menu-item>
                        <!-- </el-menu-item-group> -->
                    </el-submenu>

                    <el-submenu index="3" v-if="role == 3">
                        <template slot="title">
                            <i class="el-icon-monitor"></i>
                            <span>系统管理</span>
                        </template>
                        <!-- <el-menu-item-group> -->
                            <el-menu-item index="/system/user" style="padding-left: 80px;" ><i class="el-icon-user"></i>用户管理</el-menu-item>
                            <!-- <el-menu-item index="/system/power">权限管理</el-menu-item> -->
                           
                        <!-- </el-menu-item-group> -->
                    </el-submenu>

                    <el-submenu index="4"  v-if="role == 3">
                        <template slot="title">
                            <i class="el-icon-mobile-phone"></i>
                            <span>支付管理</span>
                        </template>
                        <!-- <el-menu-item-group> -->
                            <el-menu-item index="/pay/fun" style="padding-left: 80px;"><i class="el-icon-bank-card"></i>支付方式</el-menu-item>
                        <!-- </el-menu-item-group> -->
                    </el-submenu>

                    <el-submenu index="5" v-show="false">
                        <template slot="title">
                            <i class="el-icon-box"></i>
                            <span>仓库管理</span>
                        </template>
                        <!-- <el-menu-item-group> -->
                            <el-menu-item index="/warehouse/stock" style="padding-left: 80px;"><i class="el-icon-takeaway-box"></i>库存</el-menu-item>
                          
                        <!-- </el-menu-item-group> -->
                    </el-submenu>

                
                </el-menu>
                
            </div>
          </el-aside>

         
          <el-main>
            <!-- 主要内容 -->
            <keep-alive>
              <router-view></router-view>
            </keep-alive>
            
          </el-main>
        </el-container>
      </el-container>
    </div>
</template>

<script>

import UserInfo from "./UserInfo.vue"
import Mains from "./Main.vue"

export default {
    name: "Home",
    components: {
      UserInfo,
      Mains
    },
    data() {
      return {
        imga: require("./../../assets/logo.png"),
        activeIndex: "",
        openeds: ["1"],  //默认展开菜单
        uniqueOpend: false,
        role: 2
      }
    },
    methods: {
        //key  
        handleOpen(key, keyPath) {
            console.log(key, keyPath);
        },
        handleClose(key, keyPath) {
            // console.log(key, keyPath);
        },
        handleSelect(key, keyPath) {
            this.activeIndex = key; // 更新激活的菜单项
        }
    },
    beforeCreate() {
      let stor = localStorage.getItem("localUser");
        if (stor == null) {
          location.href = "/login"
          return;
        }
    },
    mounted() {

       let stor = localStorage.getItem("localUser");
      //   if (stor == null) {
      //     location.href = "/login"
      //     return;
      //   }
        // console.log('stor',stor);
        let jsonStor = JSON.parse(stor);
        this.role = jsonStor.role;
        



      // this.$message({
      //     message: '登录成功',
      //     type: 'success'
      //   });

       
        
    }
}
</script>

<style lang="less" scoped>
.homes {
  width: 100vw;
  height: 100vh;
  overflow-y: scroll;
  
}

// 栅格化布局
 .el-row {
    margin-bottom: 0;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {

  }

.el-menu {
  border-right-width: 0;
}

  .bg-purple-dark {
    background: #8abcd1;
  }
  .bg-purple {
    background: #8abcd1;
  }
 
  .grid-content {
  }
  .row-bg {
    padding: 0;
    // background-color: #f9fafc;
  }

// #93b5cf
// #2376b7
.logobox {
  display: flex;
  line-height: 9vh;
}

.logotext {
  width: 70%;
  // line-height: 9vh;
  color: #fff;
  font-weight: bold;
  text-align: left;
  letter-spacing: 5px;
}


.logoico {
  width: 40%;
  background-color: #fff;
  background-image: url('./../../assets/logo.png');
  background-size: 45px 45px;
  background-repeat: no-repeat;
  background-position-x: right;
  background-position-y: center;
  background-color: #3170a7;
  color: #fff;


}
.el-header {
    padding: 0;
    height: 8vh;
    background-color: #3170a7;
    color: #333;
    text-align: center;
  }
  

  
 

  // 侧边栏
  .el-aside {
    height: 90vh;
    background-color: #66a9c9;
    color: #333;
    text-align: center;
    overflow: hidden;
  }
  
  .el-main {
    background-color: #E9EEF3;
    color:#93b5cf;
    text-align: center;
  }
  //  body > .el-container {
  //   margin-bottom: 40px;
  // }
  
  // .el-container:nth-child(5) .el-aside,
  // .el-container:nth-child(6) .el-aside {
  //   line-height: 260px;
  // }
  
  // .el-container:nth-child(7) .el-aside {
  //   line-height: 320px;
  // } 




//设置一级菜单和二级菜单的背景颜色
.el-sub-menu .el-menu-item {
  background-color: RGB(38,87,227) !important;
}
//设置选鼠标指针浮动在一级菜单的设置
// .el-menu-item:hover{
//   background-color: #93b5cf !important;;
// }
.el-menu {
  margin: 0;
}

.el-menu-item {
  // padding-left: 80px;
}
//设置当前被选中的一级菜单
.el-menu-item.is-active {  
  color: #fff !important;  
  background: #3170a7 !important;  
}  

//修改二级菜单的鼠标浮点事件的时候，我设置的背景颜色就只出现在我鼠标浮动的时刻
// .el-sub-menu:hover{
//   background-color: #93b5cf !important;;
// }

// // 要设置二级菜单的触发背景颜色的时候，应使用项目的代码
// .el-sub-menu:hover{
//   background-color: #93b5cf !important;;
// }
// .el-sub-menu__title:focus, .el-sub-menu__title:hover{  
//   background-color: #93b5cf !important;;
// }




i {
  color:#3170a7;
}
  
</style>